<template>
  <div class="list">
    <div class="box chain-box">
      <div class="left-box" v-loading="leftLoading">
        <div class="box-title">产业链中心</div>
        <div class="menus">
          <el-menu
            background-color="#FFFFFF"
            class="chain-menu"
            :default-active="activeIndex"
            @select="handleSelect"
          >
            <el-menu-item
              v-for="item in leftMenus"
              :key="item.id"
              :index="item.id.toString()"
            >
              {{ item.title }}
            </el-menu-item>
          </el-menu>
        </div>
      </div>
      <div class="right-box" v-loading="loading">
        <div class="box-title">产业链行业细分</div>
        <div class="box-info">
          <template v-for="(item, index) in rightMenus">
            <div :key="index" class="info">
              <div class="info-title">{{ item.title }}</div>
              <div class="info-table">
                <div class="info-table-title">
                  <template v-for="(childItem, childIndex) in item.child">
                    <div :key="childIndex">
                      <div class="title">{{ childItem.title }}</div>
                      <ul class="info-table-value mt-10" :key="`2${childIndex}`">
                        <template v-for="(item,index) in childItem.child">
                           <li @click="toIndex(item.title)" :key="childIndex" style="cursor: pointer">{{item.title}}</li>
                        </template>
                      </ul>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { oneLeve, getSecondChanye } from "@/api/chain/chain"

export default {
  data() {
    return {
      loading: true,
      leftLoading: true,
      leftMenus: [],
      activeIndex:  '',
      rightMenus: []
    }
  },
  created() {
    this.getOneLeve()
  },
  methods: {
    toIndex(companyName) {
      this.$router.push({
        name: 'chain/chain/index',
        path: 'chain/chain/index',
        query: {
          company_name: companyName 
        }
      })
    },
    handleSelect(indexPath) {
      this.getSecondChanye(indexPath)
    },
    getOneLeve() {
      this.leftLoading = true
      oneLeve(res => {
        if (res.code === 200) {
          this.leftMenus = res.data
          this.activeIndex = this.leftMenus[0]['id'].toString()
          this.getSecondChanye(this.leftMenus[0]['id'])
        }
        this.leftLoading = false
      })
    },
    getSecondChanye(pid) {
      this.loading = true
      getSecondChanye({ pid: pid }, res => {
        if (res.code === 200) {
          this.rightMenus = res.data
        }
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/chain/chain/search";
</style>

<style lang="scss">

</style>
